<template>
  <el-card class="box-card-component" style="margin-left: 8px">
    <el-container>
      <el-header>网络信息</el-header>
      <el-main>
        <el-row>
          <el-col :span="6">
            <el-row>
              <el-col
                :span="12"
              ><div class="grid-content bg-purple">主机名</div>
              </el-col>
              <el-col
                :span="12"
              ><div class="grid-content bg-purple-light">{{ network_info.host_name }}</div>
              </el-col>
            </el-row>

            <el-row>
              <el-col
                :span="12"
              ><div class="grid-content bg-purple">默认网关</div>
              </el-col>
              <el-col
                :span="12"
              ><div class="grid-content bg-purple-light">{{ network_info.default_gateway }}</div>
              </el-col>
            </el-row>

            <el-row>
              <el-col
                :span="12"
              ><div class="grid-content bg-purple">默认网卡</div>
              </el-col>
              <el-col
                :span="12"
              ><div class="grid-content bg-purple-light">{{ network_info.default_gateway_interface }}</div>
              </el-col>
            </el-row>

            <el-row>
              <el-col
                :span="12"
              ><div class="grid-content bg-purple">首选DNS</div>
              </el-col>
              <el-col
                :span="12"
              ><div class="grid-content bg-purple-light">{{ network_info.primary_dns }}</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="18">
            <div class="nic-table bg-purple-light">
              <el-table
                v-tableFit
                :data="network_interfaces"
                :header-cell-style="headClass"
                border
                highlight-current-row
              >
                <el-table-column align="center" label="序号">
                  <template slot-scope="scope">
                    {{ scope.$index }}
                  </template>
                </el-table-column>
                <el-table-column label="网卡名称" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.name }}
                  </template>
                </el-table-column>
                <el-table-column label="IP" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.address.ip }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="MAC" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.address.mac }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="速度限制" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.stat.speed | limitFilter }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="接收/发送包数" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.stat.rx_packets | packetFilter }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="发送包数" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.stat.tx_packets | packetFilter }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="接收字节" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.stat.rx_bytes | speedFilter }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="发送字节" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.stat.tx_bytes | speedFilter }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import { getNetworkDetail } from '@/api/detail'
import { Message } from 'element-ui'
import { toSizeStr } from '@/utils/index.js'
import { toThousandslsFilter } from '@/utils/index.js'

export default {
  components: { },
  filters: {
    limitFilter(status) {
      return status === -1 ? '无限' : status
    },
    speedFilter(speed) {
      return toSizeStr(speed)
    },
    packetFilter(packet) {
      return toThousandslsFilter(packet)
    }
  },
  props: {
    module: {
      type: Number,
      require: true,
      default() {
        return 0
      }
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '310px'
    }
  },
  data() {
    return {
      network_info: {
        'host_name': '',
        'default_gateway': '',
        'default_gateway_interface': '',
        'primary_dns': ''
      },
      network_interfaces: [{
        'name': '',
        'address': {
          'ip': '0.0.0.0',
          'mac': '00:00:00:00:00:00'
        },
        'stat': {
          'speed': -1,
          'rx_packets': 0,
          'tx_packets': 0,
          'rx_bytes': 0,
          'tx_bytes': 0
        }
      }]
    }
  },
  computed: {
    ...mapGetters(['name', 'roles'])
  },
  created() {
  },
  mounted() {
    this.getZwmpDetail(this.module)
  },
  methods: {
    getZwmpDetail(module) {
      getNetworkDetail(module)
        .then((response) => {
          this.network_info = response.data.network_info
          this.network_interfaces = response.data.network_interfaces
        })
        .catch((error) => {
          Message.error(error)
        })

      const timer = setInterval(() => {
        getNetworkDetail(module)
          .then((response) => {
            this.network_info = response.data.network_info
            this.network_interfaces = response.data.network_interfaces
          })
          .catch((error) => {
            Message.error(error)
          })
      }, 3 * 60 * 1000)

      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
      this.$once('hook:beforeDestroy', () => {
        console.log('清除定时器')
        clearInterval(timer)
      })
    },
    headClass() {
      return 'text-align: center;background:#d3dce6;'
    }
  }
}
</script>

<style lang="scss" >
.box-card-component {
  .el-card__header {
    padding: 0px !important;
  }
  .el-card__body {
    padding: 0px !important;
  }
}
</style>
<style lang="scss" scoped>
.nic-table {
  margin-left:20px;
}
.box-card-component {
  .box-card-header {
    position: relative;
    height: 220px;
    img {
      width: 100%;
      height: 100%;
      transition: all 0.2s linear;
      &:hover {
        transform: scale(1.1, 1.1);
        filter: contrast(130%);
      }
    }
  }
  .card-panel-text {
    line-height: 18px;
    color: rgba(0, 0, 0, 0.55);
    font-size: medium;
    font-weight: bold;
    margin-top: 14px;
    margin-left: 14px;
  }
  .progress-item {
    margin-bottom: 10px;
    font-size: 14px;
  }
  .el-header,
  .el-footer {
    background-color: #a4a4e6;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #d3dce6;
    color: #333;
    div {
      text-align: center;
      vertical-align: middle;
      display: table-cell;
      margin: auto;
    }
  }

  .el-main {
    // background-color: #e9eef3;
    color: #333;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    text-align: center;
    vertical-align: middle;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  @media only screen and (max-width: 1510px) {
    .mallki-text {
      display: none;
    }
  }
}
</style>
